<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/> 
  <title>松果教育</title>
  <link rel="stylesheet" href="css/mdui.min.css"/>
</head>

<body class="mdui-drawer-body-left mdui-appbar-with-toolbar" >
	<!--
    	作者：smallmartial@qq.com
    	时间：2017-07-06
    	描述：导航栏  选项卡第二个div  修改导航栏 refresh为 个人中心  修改more_vert为退出   
    -->
<div class="mdui-appbar mdui-appbar-fixed">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon" id="toggle_01"><i class="mdui-icon material-icons">menu</i></a>
    <a href="javascript:;" class="mdui-typo-title">松果教育</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">home</i></a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
  </div>
  <div class="mdui-container">
  <div class="mdui-tab mdui-tab-full-width" mdui-tab>
  	<a href="#example4-tab3" class="mdui-ripple">智创未来</a>
    <a href="#example4-tab1" class="mdui-ripple">个人资料</a>
    <a href="#example4-tab2" class="mdui-ripple">遇见名师</a>
    
  </div>
</div>
</div>


<!--
	作者：smallmartial@qq.com
	时间：2017-07-06
	描述：个人资料 遇见名师   板块
-->


<div class="mdui-container" id=example4-tab1>
	
<br/>
<br/>
<br/>
  <div class="mdui-textfield mdui-textfield-floating-label">
    <label class="mdui-textfield-label">姓名</label>
    <textarea class="mdui-textfield-input" disabled></textarea>
  </div>

  <div class="mdui-textfield mdui-textfield-floating-label">
    <label class="mdui-textfield-label">生日</label>
    <textarea class="mdui-textfield-input" disabled></textarea>
  </div>

  <div class="mdui-textfield mdui-textfield-floating-label">
    <label class="mdui-textfield-label">手机号</label>
    <textarea class="mdui-textfield-input" disabled></textarea>
  </div>

  <div class="mdui-textfield mdui-textfield-floating-label">
    <label class="mdui-textfield-label">QQ</label>
    <textarea class="mdui-textfield-input" disabled></textarea>
  </div>

  <div class="mdui-textfield mdui-textfield-floating-label">
    <label class="mdui-textfield-label">地区</label>
    <textarea class="mdui-textfield-input" disabled></textarea>
  </div>

  <div class="mdui-textfield mdui-textfield-floating-label">
    <label class="mdui-textfield-label">账号有效期</label>
    <textarea class="mdui-textfield-input" disabled></textarea>
  </div>

</div>

<div class="mdui-container" id="example4-tab2">
<br/>
<br/>
<br/>
<div class="mdui-video-container">
  <iframe height=498 width=510 src="//player.youku.com/embed/XNzUwOTk5MzE2" frameborder=0 allowfullscreen></iframe>
</div>
</div>
<!--
	作者：smallmartial@qq.com
	时间：2017-07-07
	描述：隐藏导航栏   需要修改配色
-->

<div class="mdui-drawer mdui-drawer-open" id="drawer">
 <div class="mdui-panel mdui-panel-gapless" mdui-panel="{accordion: true}">

    <div class="mdui-panel-item">
     <div class="mdui-panel-item-header">学习功能</div>
      <div class="mdui-panel-item-body">
      	 <li class="mdui-list-item mdui-ripple">
          	<i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
          	<div class="mdui-list-item-content">学口语</div>
       	</li>
      	<li class="mdui-list-item mdui-ripple">
        	 <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
        	 <div class="mdui-list-item-content">听英语</div>
      	</li>
    		<li class="mdui-list-item mdui-ripple">
      			<i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      			<div class="mdui-list-item-content">练口语</div>
   	 		</li> 
    		<li class="mdui-list-item mdui-ripple">
      			<i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      			<div class="mdui-list-item-content">待开放</div>
   	 	</li>       
     </div>
    </div>

<ul class="mdui-list" mdui-collapse="{accordion: true}">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
    <div class="mdui-list-item-content">Home</div>
  </li>


  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
      <div class="mdui-list-item-content">第一单元</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">第二单元</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>
  
  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
      <div class="mdui-list-item-content">第三单元</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">第四单元</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>

  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
      <div class="mdui-list-item-content">第五单元</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">第六单元</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>
  
    <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
      <div class="mdui-list-item-content">第七单元</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">第八单元</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>



</ul>
  </div>

</div>
<!--
	作者：smallmartial@qq.com
	时间：2017-07-07
	描述：卡片效果
-->

<div class="mdui-container" id="example4-tab3">
	<br/>
	<br/>
	<br/>
	<div class="mdui-col-sm-5">
      <div class="mdui-card">
        <div class="mdui-card-media">
          <img src="//mdui-org.b0.upaiyun.com/docs/assets/docs/img/card.jpg"/>
          <div class="mdui-card-media-covered mdui-card-media-covered-transparent">
            <div class="mdui-card-primary">
              <div class="mdui-card-primary-title">学口语</div>
              <div class="mdui-card-primary-subtitle">Subtitle</div>
            </div>
          </div>
        </div>
        <div class="mdui-card-actions">
          <button class="mdui-btn mdui-ripple">action 1</button>
          <button class="mdui-btn mdui-ripple">action 2</button>
        </div>
      </div>
	</div>
	<div class="mdui-col-sm-5">
      <div class="mdui-card mdui-shadow-4">
        <div class="mdui-card-media">
          <img src="//mdui-org.b0.upaiyun.com/docs/assets/docs/img/card.jpg"/>
          <div class="mdui-card-media-covered mdui-card-media-covered-transparent">
            <div class="mdui-card-primary">
              <div class="mdui-card-primary-title">听口语</div>
              <div class="mdui-card-primary-subtitle">Subtitle</div>
            </div>
          </div>
        </div>
        <div class="mdui-card-actions">
          <button class="mdui-btn mdui-ripple">action 1</button>
          <button class="mdui-btn mdui-ripple">action 2</button>
        </div>
      </div>
	</div>
	<div class="mdui-col-sm-5">
      <div class="mdui-card mdui-shadow-4">
        <div class="mdui-card-media">
          <img src="//mdui-org.b0.upaiyun.com/docs/assets/docs/img/card.jpg"/>
          <div class="mdui-card-media-covered mdui-card-media-covered-transparent">
            <div class="mdui-card-primary">
              <div class="mdui-card-primary-title">练口语</div>
              <div class="mdui-card-primary-subtitle">Subtitle</div>
            </div>
          </div>
        </div>
        <div class="mdui-card-actions">
          <button class="mdui-btn mdui-ripple">action 1</button>
          <button class="mdui-btn mdui-ripple">action 2</button>
        </div>
      </div>
	</div>
	<div class="mdui-col-sm-5">
      <div class="mdui-card mdui-shadow-4">
        <div class="mdui-card-media">
          <img src="//mdui-org.b0.upaiyun.com/docs/assets/docs/img/card.jpg"/>
          <div class="mdui-card-media-covered mdui-card-media-covered-transparent">
            <div class="mdui-card-primary">
              <div class="mdui-card-primary-title">待开放</div>
              <div class="mdui-card-primary-subtitle">Subtitle</div>
            </div>
          </div>
        </div>
        <div class="mdui-card-actions">
          <button class="mdui-btn mdui-ripple">action 1</button>
          <button class="mdui-btn mdui-ripple">action 2</button>
        </div>
      </div>
	</div>


</div>

<!--
	作者：smallmartial@qq.com
	时间：2017-07-07
	描述：悬浮按钮
-->
<button class="mdui-fab mdui-fab-fixed" mdui-dialog="{target: '#example-1'}"><i class="mdui-icon material-icons">add</i></button>




  <div class="mdui-dialog" id="example-1">
  <div class="mdui-dialog-title">密码修改</div>
  <div class="mdui-textfield mdui-textfield-floating-label">
    <label class="mdui-textfield-label">原始密码</label>
    <input class="mdui-textfield-input" type="text" pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" required/>
    <div class="mdui-textfield-error">密码至少 6 位，且包含大小写字母</div>
  </div>
  <div class="mdui-textfield mdui-textfield-floating-label">
    <label class="mdui-textfield-label">新密码</label>
    <input class="mdui-textfield-input" type="text" pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" required/>
    <div class="mdui-textfield-error">密码至少 6 位，且包含大小写字母</div>
  </div>

    <div class="mdui-dialog-actions">
      <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
      <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>确认</button>
    </div>
  </div>


<script src="js/mdui.min.js"></script>
<script type="text/javascript">
var inst = new mdui.Drawer('#drawer');
// method
document.getElementById('toggle_01').addEventListener('click', function () {
  inst.toggle();
});
// event
var drawer = document.getElementById('drawer');
drawer.addEventListener('open.mdui.drawer', function () {
  console.log('open');
});
drawer.addEventListener('opened.mdui.drawer', function () {
  console.log('opened');
});
drawer.addEventListener('close.mdui.drawer', function () {
  console.log('close');
});
drawer.addEventListener('closed.mdui.drawer', function () {
  console.log('closed');
});
var inst = new mdui.Tooltip(selector, auto);

</script>


</body>
</html>
